<template>
  <div class="view">
    <x-header :left-options="{backText: ''}"
              class="vux-1px-b">业绩奖励</x-header>
    <div class="header">
      <div class="headerdiv">
        <p>总人数</p>
        <p>{{userCKCount}}</p>
      </div>
    </div>
    <div class="recommend">
      <grid>
        <grid-item>
          <p>{{synumber}}</p>
          <p>已奖励人数</p>
        </grid-item>
        <grid-item>
          <p>￥{{symoney}}</p>
          <p>已奖励金额</p>
        </grid-item>
      </grid>
    </div>

    <div class="invite">
      <x-table :cell-bordered="false"
               style="background-color:#fff;">
        <thead>
          <tr>
            <th style="font-size:0.4rem">业绩奖励详情</th>
            <th></th>
            <th v-if="dataList.length>0">奖励方式</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in dataList" :key="index">
            <td>{{item.rewards_time | formatDate}}</td>
            <td>{{item.rewards_number}}人奖励金{{item.rewards_money}}</td>
            <td v-if="item.rewards_type==0">线下</td>
            <td v-else>线上</td>

          </tr>
        </tbody>
      </x-table>
    </div>
  </div>
</template>
<script>

import { XTable, XHeader, Grid, GridItem } from 'vux'
import { rewardsInfo } from '@api'
import { mapMutations, mapState } from 'vuex'
import { SET_LOADING } from '@store/type'
import { formatDate } from '../../../filters/date.js'
export default {
  // 转换时间格式
  filters: {
    formatDate (time) {
      var dtime = time.slice(6, 19)
      var date = new Date(parseInt(dtime))
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  components: {
    XHeader,
    Grid,
    GridItem,
    XTable
  },
  data () {
    return {
      userHead: 'http://img.zanjl.com/Content/img/image/user_head.png',
      dataList: {},
      userCKCount: 0,
      synumber: 0,
      symoney: 0
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    async loaduserslevel () {
      // 获取用户推荐下一级数量、所有同等级下级数量、已奖励人数、已奖励金额、奖励纪录列表
      let res = await rewardsInfo(this.user.user_id)
      if (res.code === 200) {
        this.userCKCount = res.data.znumber
        this.synumber = res.data.synumber
        this.symoney = res.data.symoney
        this.dataList = res.data.rewarslist
      }
    }
  },
  created () {
    this.loaduserslevel()
  },
  activated () {
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/pub";
.view {
  text-align: center;
  .header {
    text-align: -webkit-center;
    width: 100%;
    background-image: url("http://img.zanjl.com/Content/img/image/tuijian_png@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 5% 5% 1rem 5%;
    color: white;
    p {
      padding-top: 0;
    }
    .numberr {
      font-size: 40pt;
      margin-top: 10%;
    }
    .addfont {
      font-size: 9pt;
      img {
        margin-bottom: -.05rem;
      }
    }
  }
  .headerdiv {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 0.05rem solid #fffefc;
    margin-bottom: 0.5rem;
    display: table-cell;
    vertical-align: middle;
    line-height: initial;
  }

  .recommend {
    background: #fffefc;
    text-align: center;
    margin: 5%;
    border-radius: .125rem;
    border: 0.1rem solid #fffefc;
    margin-top: -0.5rem;
    p {
      margin: 3% 0;
    }
    .left {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      margin: 0 0 3% 3%;
      float: left;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .right {
      height: 1.5rem;
      text-align: left;
      margin-left: 2rem;
      font-size: 0.35rem;
    }
  }
  .invite {
    background: #fffefc;
    text-align: center;
    margin: 5%;
    border-radius: .125rem;
    p {
      margin: 3% 0;
    }
    .left {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      margin: 0 0 3% 3%;
      float: left;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .right {
      height: 1.5rem;
      text-align: left;
      margin-left: 2rem;
      font-size: 0.35rem;
    }
  }
}
</style>
